*{ margin: 0; padding: 0;  }
body{ font-size: 16px;}
ul,li{ list-style: none;}
button{ outline: none; border:0 none;}
html,body{line-height: 2;}
.box-size{ box-sizing: border-box;}
.flex{ display: flex; display: -webkit-flex;}
.bg_409EFF{ background:$c_409EFF;}
.c_409EFF{ color: $c_409EFF;}
.c_07c160{ color: $c_07c160;}
.c_FFC0CB{color: $c_FFC0CB;}
.c_ff7f50{color: $c_ff7f50;}
.c_8B0016{color: $c_8B0016;}
.c_F00{ color: $c_F00;}
.c_fff{color:$c_FFF}
.text_c{ text-align: center;}

.border_radius_4{
    @include borderRadius(4px);
}
//循环设置间距
$sizes: 5,10, 15,20,25,30;
@each $size in $sizes {
    .pd_#{$size}{
       padding:$size+px
    }
    .pd_l_#{$size}{
        padding-left:$size+px
    }
    .pd_r_#{$size}{
        padding-right:$size+px
    }
    .pd_lr_#{$size}{
        padding-left:$size+px;
        padding-right:$size+px
    }
    .pd_t_#{$size}{
        padding-top:$size+px
    }
    .pd_b_#{$size}{
        padding-bottom:$size+px
    }
    .pd_tb_#{$size}{
        padding-top:$size+px;
        padding-bottom:$size+px
    }
    .mg_#{$size}{
        margin:$size+px
    }
    .mg_l_#{$size}{
        margin-left:$size+px
    }
    .mrgin_r_#{$size}{
        margin-right:$size+px
    }
    .mg_lr_#{$size}{
        margin-left:$size+px;
        margin-right:$size+px
    }
    .mg_t_#{$size}{
        margin-top:$size+px
    }
    .mg_b_#{$size}{
        margin-bottom:$size+px
    }
    .mg_tb_#{$size}{
        margin-top:$size+px;
        margin-bottom:$size+px
    }
}
//循环
@for $i from 1 through 10 {
    .flex-#{$i}{
        @include flex($i);
    }
}
.comm-header{
    background: $c_409EFF;
    height: 44px;
    &>div{
        background: $c_409EFF;
        color: $c_FFF;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        z-index: 10;
        @include lineHeight(44px);
        @include positionFlex(0,0);
        h2{
            padding: 0 44px;
            font-size: $size18;
        }
        .icon_bak,.icon_add{
            width: 44px;
            font-size:$size22;
            cursor: pointer;
            @include lineHeight(44px);
        }
        .icon_bak{
            @include positionAbsolute()
        }
        .icon_add{
            @include positionAbsolute(
                $xPosition:right
            )
        }
    }
}

.comm_alert{
    @include widthHeight();
    @include flexItemsContent();
    @include positionFlex();
    background:rgba($color:$c_000, $alpha:.3);
    &_content{
        width: 80%;
        // padding: $pd10 0;
        @extend .box-size;
        background: $c_FFF;
        @include borderRadius(6px);
        >h3{ 
            border-bottom:1px solid $c_DDD;
            font-size: $size16;
            font-weight: normal;
            text-align: center;
            color: $c_000;
            @include lineHeight(44px);
        }
        .comm_alert_cont{
            
            font-size: $size14;
            line-height: 1.6;
            height: 100px;
            overflow-x: hidden;
            @extend .flex;
            >div{
                align-self: center;
                text-align: center;
                width: 100%;
                
                
                >span{
                    display: inline-block;
                    text-align: left;
                }
            }
        }
        .ensure-btn{
            display: block;
            text-align: center;
            background: $c_409EFF;
            color: $c_FFF;
            width: 100%;
            @include lineHeight(44px);
            @include borderRadius(0,0,6px,6px);
        }
    }
}
.comm_not_page{
    height: calc( 100vh - 44px);
    @include flexItemsContent();
    >div{
        width: 100%;
        img{
            display: block;
            width: 100%;
        }
        .btn{
            width: 50%;
            color: $c_FFF;
            text-align: center;
            display: block;
            margin: 0 auto;
            text-decoration: none;
            @include lineHeight(50px);
            @include borderRadius(4px);
        }
    }
}